<template>
  <div>
    <h1>会员修改</h1>
    <table class="table table-bordered">
      <tbody>
      <tr>
        <td>会员名称</td>
        <td><input type="text" v-model="info.MeberName"/></td>
      </tr>
      <tr>
        <td>会员年龄</td>
        <td><input type="text" v-model="info.MeberAge"/></td>
      </tr>
      <tr>
        <td>会员照片</td>
        <td>
          <input type="file" @change="img"/>
          <img :src="info.Photo" width="100" height="100" />
        </td>
      </tr>
      <tr>
        <td>会员手机号</td>
        <td><input type="text" v-model="info.Phone" maxlength="11"/></td>
      </tr>
      <tr>
        <td>会员等级</td>
        <td>
          <select v-model="info.LevelId">
            <option value="">请选择</option>
            <option :value="i.Id" v-for="i in data1.list">{{i.LevelName}}</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>会员状态</td>
        <td>
          <input type="radio" name="state" v-model="info.State" :value="1"/>启用
          <input type="radio" name="state" v-model="info.State" :value="0"/>禁用
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input type="button" value="修改" class="btn btn-success" @click="Ok"/>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from "axios";
import moment from "moment";
import {useRoute,useRouter} from "vue-router";

const router = useRouter()
const route = useRoute()

onMounted(() => {
  getlist();
  Find();
})
const Find=()=>{
  axios({
    url:"https://localhost:7032/api/User/Find",
    method:"get",
    params:{id:route.query.id}
  }).then((res)=>{
    console.log(res)
    Object.assign(info,res.data)
  })
}
//发送数据
let info:any=reactive({
   Id:route.query.id,
  "MeberName": "",
  "MeberAge": "",
  "Photo": "",
  "Phone": "",
  "LevelId": "",
  "State": 1,

})
const img=(e:any) => {
  let obj=e.target.files[0];
  let f=new FormData();
  f.append('file', obj);
  axios({
    url:'https://localhost:7032/api/Img/Img',
    method:'post',
    data:f
  }).then((res) => {
    console.log(res)
    if(res.data=="格式不对")
    {
      alert("您的格式有误")
      return;
    }
    if(res.data=="大于2M")
    {
      alert("图片过大")
      return;
    }
    info.Photo=res.data;

  })
}
const Ok=()=>{
  axios({
    url:"https://localhost:7032/api/User/UpdateMember",
    method:"put",
    data:info
  }).then(res=>{
    console.log(res)
    if(res.data==-1)
    {
      alert("会员名称重复")
      return;
    }
    if(res.data>0)
    {
      alert("修改成功")
      router.push("/memberList")
      return;
    }
    else
    {
      alert("修改失败")
    }
  })
}

//接受数据
let data1:any=reactive({
  totalcount:"",
  totalpage:'',
  list:[]
})
//发送数据
let info1:any=reactive({
  pageindex:1,
  pagesiez:10,
  level:"",
  reigh:"",
})
const getlist=()=>{
  axios({
    url:"https://localhost:7032/api/User/GetLevel",
    method:"get",
    params:info1,
  }).then(res=>{
    console.log(res)
    data1.list=res.data.list;
    data1.totalcount = res.data.totalcount;
    data1.totalpage = res.data.totalpage;
  })
}
</script>

<style scoped>

</style>